<template>
  <div class="doctor">
    <van-search v-model="value" placeholder="请输入搜索关键词">
      <template #left>
        <p>问医</p>
      </template>
    </van-search>
    <div class="room">
      <h4>科室寻医</h4>
      <van-grid :column-num="5" :icon-size="26" :border="false" class="ico">
        <van-grid-item
          v-for="value in gridData"
          :key="value.id"
          :icon="value.icon"
          :text="value.text"
          class="nav-grid-item"
        />
      </van-grid>
    </div>
    <div class="Outpatient">
      <h4>特色门诊</h4>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="src\assets\图层 1.png" style="width: 100%" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="src\assets\图层 2.png" style="width: 100%" />
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="src\assets\图层 3.png" style="width: 100%" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="src\assets\图层 4.png" style="width: 100%" />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="Outpatient1">
      <h4>优选服务</h4>
      <van-grid :icon-size="150" gutter="3px" :border="false" class="serive">
        <van-grid-item
          v-for="value in gridData2"
          :key="value.id"
          :icon="value.icon"
          :text="value.text"
          class="nav-grid-item"
        />
        <van-grid-item
          v-for="value in gridData3"
          :key="value.id"
          :icon="value.icon"
          :text="value.text"
          class="nav-grid-item"
        />
      </van-grid>
    </div>
    <van-row>
      <van-col span="16" v-for="value in doctors" :key="value.length">
        <div class="prod">
          <img class="imgss" :src="value.url" alt="" />
          <div class="introduce">
            <h4 class="title">{{ value.name }}</h4>
            <span class="van-multi-ellipsis--l3"
              ><span style="color: green">擅长：</span>{{ value.adept }}</span
            >
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { userhandle } from "../../api/userDoctor";
onMounted(() => {
  const result: any = userhandle().then((res) => {
    doctors.value = res.list;
    console.log(doctors.length);
  });
});

let doctors = ref("");

function getImageUrl(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
}

import { ref } from "vue";
import router from "../../router";
const gridData = [
  {
    id: 1,
    icon: getImageUrl("儿科"),
    text: "儿科",
  },
  {
    id: 2,
    icon: getImageUrl("妇产科"),
    text: "妇产科",
  },
  {
    id: 3,
    icon: getImageUrl("皮肤科"),
    text: "皮肤科",
  },
  {
    id: 4,
    icon: getImageUrl("内科"),
    text: "内科",
  },
  {
    id: 4,
    icon: getImageUrl("全部"),
    text: "全部",
  },
];
function getImageUrl1(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
}
const gridData1 = [
  {
    id: 1,
    icon: getImageUrl1("图层 1"),
  },
  {
    id: 2,
    icon: getImageUrl1("图层 2"),
  },
  {
    id: 3,
    icon: getImageUrl1("图层 3"),
  },
  {
    id: 4,
    icon: getImageUrl1("图层 4"),
  },
];
function getImageUrl2(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
}
const gridData2 = [
  {
    id: 1,
    icon: getImageUrl2("图层 6"),
  },
  //   {
  //   id: 1,
  //   icon: getImageUrl2('图层 5'),

  // },
  //   {
  //   id: 1,
  //   icon: getImageUrl2('图层 7'),

  // },
];
function getImageUrl3(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
}
const gridData3 = [
  // {
  //   id: 1,
  //   icon: getImageUrl2('图层 6'),

  // },
  // {
  //   id: 1,
  //   icon: getImageUrl3("图层 5"),
  // },
  {
    id: 1,
    icon: getImageUrl3("图层 9"),
  },
];
</script>

<style lang="less" scoped>

p {
  font-size: 13px;
  padding-right: 10px;
}
:deep(.van-grid-item__content) {
  font-size: 10px;
  height: 100px;
}
.room {
  width: 90%;
  border-radius: 20px;
  margin: auto;
  margin-top: 10px;
  .ico {
    margin-top: -22px;
  }
}
.Outpatient {
  width: 90%;
  margin: auto;
}
h4 {
  margin-left: 10px;
}
.Outpatient1 {
  width: 91%;
  margin: auto;
}

.prod {
  width: 400px;
  height: 150px;
  border: 0px solid;
  margin-top: 10px;
}
.imgss {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 30px;
  overflow: hidden;
  border: 0;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}
img {
  width: 50px;
  height: 50px;
  display: block;
  float: left;
}
.title {
  display: block;
  margin-top: 2px;
  margin-left: 10px;
  float: left;
}
.introduce {
  width: 300px;
  height: 100%;

  border: 0px solid;
  display: flex;
  flex-direction: column;
}
.serive {
  margin-top: 50px;
  margin-bottom: 50px;
}
</style>

